<template>
  <x-popup height="660" v-model="show" title="线下支付操作">
    <x-select :options="PAY_WAY" v-model="payWay" label="支付方式" :required="true"></x-select>
    <x-input v-model="money" label="收款金额" :required="true"></x-input>
    <x-input v-model="remark" label="备注"></x-input>

    <x-bottom>
      <view class="note">注：提交的金额小于本期金额，则剩余金额需要用户再支付。</view>
      <view @click="onSubmit" class="x-btn x-btn-primary">提交</view>
    </x-bottom>
  </x-popup>
</template>

<script setup>
import XPopup from '@/components/lib/popup';
import billStore from '@/stores/modules/bill';
const BillStore = billStore();
import {ref} from 'vue';
const show = ref(false)

const id = ref();
const payWay = ref();
const money = ref();
const remark = ref();
const emit = defineEmits(['success'])
const open = (billId) => {
  show.value = true;
  id.value = billId;
}

const onSubmit = async () => {
  let isOk = await BillStore.offLinePay(id.value, payWay.value, money.value, remark.value)
  if(isOk) {
    show.value = false;
    emit("success", id.value)
  }
}

defineExpose({open})
</script>

<style scoped lang="less">
.note {
  color: red;
  font-size: 24rpx;
  padding-bottom: 10rpx;
  box-sizing: border-box;
  text-align: center;
}
</style>
